<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-02-18 16:33:06
 * @LastEditors: Cxy
 * @LastEditTime: 2024-12-22 21:02:52
 * @FilePath: \xy-admin\play\src\views\example\api.vue
-->
<script setup lang="ts">
import {
  getPinJieApi,
  getZhengChangApi,
  postParamsApi,
  postParamsUploadApi,
  postZhengChangApi,
  postZhengchangUploadApi
} from '@/api/example'
import { controller } from '@/api/axios'

async function getZhengchang() {
  await getZhengChangApi({ a: 1, b: 2 })
}
async function getPinJie() {
  getPinJieApi('a=1&b=2').then(res => {
    console.log(res)
  })
}
async function postZhengchang() {
  const res = await postZhengChangApi({ a: 1, b: 2 })
  console.log(res)
}
async function postParams() {
  await postParamsApi({ a: 1, b: 2 }, { c: 3, d: 4 })
}
const progressNum = ref(0)
const domZhengchang = ref()
async function postZhengchangUpload() {
  const FD = new FormData()
  FD.append('string', 'my value')
  FD.append('blob', new Blob(['1', '2', '3']))
  FD.append('file', domZhengchang.value.files[0])
  await postZhengchangUploadApi(FD, e => {
    progressNum.value = Math.floor((e.progress || 0) * 100)
  })
}
const domParams = ref()
const abortKey = Symbol('321')
async function postParamsUpload() {
  const FD = new FormData()
  FD.append('string', 'my value')
  FD.append('blob', new Blob(['1', '2', '3']))
  FD.append('file', domParams.value.files[0])
  await postParamsUploadApi(
    FD,
    { a: 4, b: 5 },
    e => {
      progressNum.value = Math.floor((e.progress || 0) * 100)
    },
    {
      abortKey
    }
  )
}
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>get请求</span>
      </div>
    </template>
    <div>
      <el-button @click="getZhengchang">正常传参</el-button>
      <el-button @click="getPinJie">拼接传参</el-button>
    </div>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>post请求</span>
      </div>
    </template>
    <div>
      <el-button @click="postZhengchang">只有data参数, 正常传参</el-button>
      <el-button @click="postParams">data和params都有</el-button>
    </div>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>postUpload上传请求</span>
        <el-progress style="margin-top: 10px" :textInside="true" :stroke-width="26" :percentage="progressNum">
          <span>展示上传进度</span>
        </el-progress>
      </div>
    </template>
    <div>
      <p>正常上传</p>
      <input ref="domZhengchang" type="file" style="margin-top: 10px" @change="postZhengchangUpload" />
    </div>
    <template #footer>
      <p>带params参数上传</p>
      <input ref="domParams" type="file" style="margin-top: 10px" @change="postParamsUpload" />
      <el-button @click="controller.abortRequest(abortKey)">取消请求</el-button>
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card:nth-child(2) {
  margin: 10px 0;
}
</style>
